*{
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}



#self{
    width: 100%;
    border-radius: 20px;
    border: darkcyan 1px solid;
    text-align: center;
}

#self-headshot{
    width: 70px;
    height: 70px;
    border-radius: 500px;
}

#nickname{

}

#tip-div{
    line-height: 2.3;
    text-align: center;
    margin: auto;
    position: center;
    z-index: 15;
    background-color: aquamarine;
    height: 50px;
    font-size: 20px;
    opacity: 0;
}

#friends-div{
    width: 100%;
    height: 280px;
    text-align: center;
    border-radius: 20px;
    border: darkcyan 1px solid;
    overflow: auto;
}

#groups-div{
    overflow: auto;
    width: 100%;
    height: 280px;
    text-align: center;
    border-radius: 20px;
    border: darkcyan 1px solid;
}

.friend-headshot{
    width: 50px;
    height: 50px;
    border-radius: 100px;
    float: left;
}

.left-dt{
    text-align: left;
    border: coral 1px solid;
    border-radius: 20px;
    height: 50px;
    position: relative;
}

#right-div{
    float: right;
    position: relative;
    /*top: -100%;*/
    width: 59%;
    height: 92%;
    border-radius: 20px;
    border: darkcyan 1px solid;
}

#left-div{
    width: 40%;
    margin-right: 0;
    float: left;
}

#target{
    text-align: center;
    border-bottom: #211136 1px solid;
}

.message-div{
    width: 100%;
    height: 70%;
    overflow-y: auto;
    /*display: flex;*/
    /*flex-direction: column-reverse;*/
}

#chat{
    width: 100%;
    height: 20%;
}

#message-input{
    border: #221334 1px solid;
    opacity: 0.7;
    /*width: 99%;*/
    background-color: #9a444e;
    min-height: 90%;
    min-width: 99%;
    max-height: 90%;
    max-width: 99%;
}

.time{
    font-size: 10px;
    font-weight: bolder;
    color: wheat
}

.other{
    margin-left: 10px;
    text-align: left;
    margin-top: 20px;
    min-height: 50px;
    overflow: hidden;
}

.me img{
    height: 50px;
    width: 50px;
    float: right;
    border-radius: 100px;
}

.me{
    text-align: right;
    margin-right: 10px;
    margin-top: 20px;
    overflow: hidden;
    min-height: 50px;
}

.other img{
    height: 50px;
    width: 50px;
    float: left;
    border-radius: 100px;
}


.other span{
    position: relative;
    line-height: 2;
    background: #ef907a;
    color: black;
    border-radius: 4px;
    word-break: break-all;
    width: fit-content;
    float: left;
    max-width: 77%;
    min-width: 30px;
}

.me span{
    position: relative;
    line-height: 2;
    background: coral;
    color: black;
    border-radius: 4px;
    word-break: break-all;
    width: fit-content;
    float: right;
    max-width: 77%;
    text-align: left;
    min-width: 30px;
}


.head{
    width: 50px;
    height: 50px;
    border-radius: 100px;
}

.window{
    position: absolute;
    width: 200px;
    height: 90%;
    top: 50px;
    border: black solid 1px;
    border-radius: 20px;
    background-color: burlywood;
}

#window-group{
    left: -201px;
}

#window-self{
    left: -201px;

}

#window-other{
    left: -201px;

}

.window div label{
    color: maroon;
    font-weight: bolder;
}

.window-span{
    word-break: break-all;
}

.group-member-div{
    width: 49px;
    height: 50px;
    float: left;
    text-align: center
}

.group-member-img{
    width: 40px;
    height: 40px;
    border-radius: 100px
}